import React, { useState, useEffect } from 'react';
import { connect, history, Link } from 'umi';
import InitForm from '@/components/InitForm';
import styles from './index.less';
import { Scrollbars } from 'react-custom-scrollbars';
import { message, Checkbox, Form } from 'antd';
import { doFetch } from '@/utils/doFetch'
import { useRef } from 'react';


const Login = (props) => {
  const { userLogin, submitting } = props;
  const { lastlogininfo } = userLogin,
    [formRef] = Form.useForm(),
    checkedRef = useRef(),
    [checked, setchecked] = useState(false);



  return (
    <div className={styles.main}>
      <div className={`${styles.head} spacebt`}>
        <span>企业注册</span>
        {
          lastlogininfo.userName ? null : <Link to="/user/login" style={{ fontSize: 14, color: "#fff" }}
          >立即登录</Link>
        }
      </div>
      <div className={styles.body}>
        <Scrollbars
          thumbMinSize={10}
          autoHide
          style={{ height: '100%' }}
          hideTracksWhenNotNeeded={true}
        >
          <div style={{ backgroundColor: "rgba(255,255,255, 0.4)", overflow: "hidden", paddingTop: 20 }}>
            <InitForm
              formRef={formRef}
              layout="horizontal"
              fields={{
                "companyName": {
                  "value": null,
                  "type": "input",
                  "title": "公司名称",
                  "name": [
                    "companyName"
                  ],
                  "required": true,
                  "col": { span: 24 }
                },
                "accountName": {
                  "value": null,
                  "type": "input",
                  "title": "用户名",
                  "name": [
                    "accountName"
                  ],
                  "required": true,
                  "col": { span: 24 }
                },
                "password": {
                  "value": null,
                  "type": "password",
                  "title": "密码",
                  "name": [
                    "password"
                  ],
                  "required": true,
                  "col": { span: 24 }
                },
                "confirmpassword": {
                  "value": null,
                  "type": "password",
                  "title": "确认密码",
                  "name": [
                    "confirmpassword"
                  ],
                  "required": true,
                  "col": { span: 24 },
                  checkConfirm: (rule, value) => {
                    if (
                      value &&
                      value !== formRef.getFieldValue('password')
                    ) {
                      return Promise.reject('2次密码不一致！');
                    } else {
                      return Promise.resolve();
                    }
                  },
                },
                "contacts": {
                  "value": null,
                  "type": "input",
                  "title": "联系人",
                  "name": [
                    "contacts"
                  ],
                  "required": true,
                  "col": { span: 24 }
                },
                "telephone": {
                  "value": null,
                  "type": "input",
                  "title": "手机号码",
                  "name": [
                    "telephone"
                  ],
                  "required": true,
                  "col": { span: 24 }
                },
                "phoneCode": {
                  "value": null,
                  "type": "vrcode",
                  "title": "验证码",
                  "mobile": "telephone",
                  "name": [
                    "phoneCode"
                  ],
                  "required": true,
                  "col": { span: 24 },
                  "path": "/ngic-promote-company/epCompany/registerSendCode",
                  "extraparams": {
                    "telephone": "linked"
                  }
                },
              }}
              style={{ margin: "0 20px 20px 20px" }}
              onChange={() => {

              }}
              reset={true}
              submitData={(values) => {
                if (!checkedRef.current.state.checked) {
                  message.warn("请先阅读并同意服务条款与隐私策略！")
                  return
                }
                delete values.confirmpassword;
                doFetch({ url: "/ngic-promote-company/epCompany/register", params: { ...values } }).then(res => {

                  if (res.code == "0000") {
                    message.success("注册成功！");

                    setTimeout(() => {
                      if (lastlogininfo.userName) {
                        history.push("/")
                      } else {
                        history.push("/user")
                      }
                    }, 1200)
                  }

                })

              }}
            >
              <Checkbox
                ref={checkedRef}
                style={{ marginTop: 12 }}
              >我已阅读并接受网站 服务条款 和 隐私策略</Checkbox>
            </InitForm>



          </div>
        </Scrollbars>
      </div>
    </div >
  );
};

export default connect(({ login, global, loading }) => ({
  global,
  userLogin: login,
  submitting: loading.effects['login/login'],
}))(Login);
